<template>
	<div>
		<!--首页改成轮播图 element轮播组件-->
		<div>
			<el-carousel height="350px">
				<el-carousel-item v-for="item in bannerList" :key="item.Path">
					<img :src="root + item.Path" style="height: 350px;width: 100%;">
				</el-carousel-item>
			</el-carousel>
		</div>
		<!--商品-->
		<div v-loading="loading" element-loading-text="加载中...">
			<section class="w mt30 clearfix" v-for="(item,i) in catergoryProducts" :key="i">
				<y-shelf :title="item.title">
					<div slot="content" class="floors">
						<div class="imgbanner">
							<img v-lazy="root + catergoryProducts[i].image.image" :alt="item.title">
						</div>
						<mall-goods :msg="tab" v-for="(tab,i) in item.tabs" :key="i"></mall-goods>
					</div>
				</y-shelf>
			</section>
		</div>
	</div>
</template>
<script>
	import { getCatergory, productHome3, getBanners } from '/api'
	import YShelf from '/components/shelf'
	import mallGoods from '/components/mallGoods'
	export default {
		data() {
			return {
				bannerList: [1, 2, 3],
				arr: [], //商品类数组
				arr2: [], //全部商品数组
				loading: true //商品加载中
			}
			
		},
		computed: {
			//将商品和类别的数据整合起来
			catergoryProducts: function() {
				let parr = []
				let arr = this.arr
				let arr2 = this.arr2
				for(var i = 0; i < arr.length; i++) {
					let tabArr = []
					for(var g = 0; g < arr2.length; g++) {
						//一个商品分类里最多显示6个商品
						if(tabArr.length > 5) break;
						if(arr[i].Id == arr2[g].CategoryId) {
							tabArr.push({
								CurrentPrice: arr2[g].CurrentPrice,
								ProductName: arr2[g].ProductName,
								Id: arr2[g].Id,
								ImgPath: arr2[g].ImgPath,
								ShortDescription: arr2[g].ShortDescription,
							})
						}
					}
					parr.push({
						image: {
							image: arr[i].BigImageUrl
						},
						title: arr[i].CategoryName,
						tabs: tabArr
					})
				}
				this.loading = false
				return parr;
			}
		},
		methods: {},
		mounted() {
			getCatergory().then(res => {
				if(res.code === 200) {
					this.arr = res.data.list
				}
			})
			productHome3().then(res => {
				if(res.code === 200) {
					this.arr2 = res.data.list
				}
			})
			getBanners().then(res => {
				let _this = this
				_this.bannerList = res.data.list
			})
		},
		//用到的两个组件
		components: {
			YShelf,
			mallGoods
		}
	}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
	.banner,
	.banner span,
	.banner div {
		font-family: "Microsoft YaHei";
		transition: all .3s;
		-webkit-transition: all .3s;
		transition-timing-function: linear;
		-webkit-transition-timing-function: linear;
	}
	
	.banner {
		perspective: 3000px;
		position: relative;
		z-index: 19;
	}
	
	.bg {
		position: relative;
		width: 1220px;
		height: 500px;
		margin: 20px auto;
		background: url("../../../static/images/banner-3d-item.png") center no-repeat;
		background-size: 100% 100%;
		border-radius: 10px;
		transform-style: preserve-3d;
		-webkit-transform-origin: 50% 50%;
		-webkit-transform: rotateY(0deg) rotateX(0deg);
	}
	
	.img {
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		bottom: 5px;
		left: 0;
		background: url("../../../static/images/banner-3d.png") center no-repeat;
		background-size: 95% 100%;
	}
	
	.text {
		position: absolute;
		top: 20%;
		right: 10%;
		font-size: 30px;
		color: #fff;
		text-align: right;
		font-weight: lighter;
	}
	
	.copyright {
		position: absolute;
		bottom: 10%;
		right: 10%;
		font-size: 10px;
		color: #fff;
		text-align: right;
		font-weight: lighter;
	}
	
	.a {
		-webkit-transform: translateZ(40px);
	}
	
	.b {
		-webkit-transform: translateZ(20px);
	}
	
	.c {
		-webkit-transform: translateZ(0px);
	}
	
	.sk_item {
		width: 170px;
		height: 225px;
		padding: 0 14px 0 15px;
		>div {
			width: 100%;
		}
		a {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			transition: all .3s;
			&:hover {
				transform: translateY(-5px);
			}
		}
		img {
			width: 130px;
			height: 130px;
			margin: 17px 0;
		}
		.sk_item_name {
			color: #999;
			display: block;
			max-width: 100%;
			_width: 100%;
			overflow: hidden;
			font-size: 12px;
			text-align: left;
			height: 32px;
			line-height: 16px;
			word-wrap: break-word;
			word-break: break-all;
		}
		.sk_item_price {
			padding: 3px 0;
			height: 25px;
		}
		.price_new {
			font-size: 18px;
			font-weight: 700;
			margin-right: 8px;
			color: #f10214;
		}
		.price_origin {
			color: #999;
			font-size: 12px;
		}
	}
	
	.box {
		overflow: hidden;
		position: relative;
		z-index: 0;
		margin-top: 29px;
		box-sizing: border-box;
		border: 1px solid rgba(0, 0, 0, .14);
		border-radius: 8px;
		background: #fff;
		box-shadow: 0 3px 8px -6px rgba(0, 0, 0, .1);
	}
	
	ul.box {
		display: flex;
		li {
			flex: 1;
			img {
				display: block;
				width: 305px;
				height: 200px;
			}
		}
	}
	
	.mt30 {
		margin-top: 30px;
	}
	
	.hot {
		display: flex;
		>div {
			flex: 1;
			width: 25%;
		}
	}
	
	.floors {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		.imgbanner {
			width: 50%;
			height: 430px;
		}
		img {
			display: block;
			width: 100%;
			height: 100%;
		}
	}
</style>